<template>
	<view>

		<view>

			<cu-custom bgColor="bg-gradual-red" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">商品详情</block>
			</cu-custom>
		</view>
		<swiper class="screen-swiper round-dot my-sw-h  bg-white" :indicator-dots="true" :circular="true" :autoplay="true"
		 interval="5000" duration="500">
			<swiper-item v-for="(item,index) in product.skus[curIx].images" :key="index">
				<image :src="imageSrc+item.largeImage" mode="aspectFit"></image>
			</swiper-item>
		</swiper>
		<!-- 当前商品价格和名称显示区域-->
		<view class="solids-bottom padding-xs flex align-center bg-white">
		
			<view class="flex-sub  bg-white">
				<view class="solid-bottom text-xxl padding ">
					<text class="text-price text-red">
					{{product.skus[curIx].price}}
					</text>
				</view>
				<view class="padding">{{product.skus[curIx].name}}</view>
			</view>
		</view>
		
		<!--商品详情导航（tab）区域-->
		<view class="cu-bar bg-white  solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 商品详情
				
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in labels" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<!-- 商品详情区域-->
		<view>
			<view v-if="TabCur==0" class="padding-xs">
				<view v-for="  (imgName,index) in   product.images"  :key="index" >
					<image :src="imageSrc+imgName" mode="aspectFit"></image>
				</view>
			</view>
			
		</view>
		<!-- 商品介绍区-->
		<view>
			 <view class="grid  col-2  padding-xs  bg-white" v-if="TabCur==1" >
					<view class="solid padding-sm" v-for="(item,index)  in product.skus[curIx].attrs" :key="index">
						{{item.name}} :{{item.value}}
					</view>
				 
			 </view>
		</view>
		
			<!-- 规格和参数-->
		
		<view>
			 <view class=" padding-xs  bg-white" v-if="TabCur==2" >
					<view class="solid padding-sm flex" v-for="(item,index)  in product.skus[curIx].specGroups" :key="index">
					
						<view class="flex-sub">
								{{item.group}}
						</view>
						<view class="flex-sub">
							 <view class="solid padding-sm" v-for="(it,index)  in  item.specsList ">
								 {{it.name}}:{{it.value}} 
							 </view>
							
						</view>
						
					</view>
				 
			 </view>
		</view>
		
		
		
		
		<!-- 空的div始终要占据对低端的位置 防止按钮条被遮挡-->
		<view class="my-foot-h">
			
		</view>
		
	






		<!-- 底部-->

		<view class="cu-bar  foot bg-white tabbar border shop">
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view>
				客服
			</button>
			<view class="action">
				<view class="cuIcon-cart">
					<view class="cu-tag badge">99</view>
				</view>
				购物车
			</view>
			<view class="bg-orange submit"  @click="showModal" data-target="ChooseModal" >加入购物车</view>
			<view class="bg-red submit">立即订购</view>
		</view>
		
		
		<!-- 加入购物车弹框-->
	<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
		<view class="cu-dialog" @tap.stop="">
			<view class="cu-bar bg-white">
				<view class="action text-blue" @tap="hideModal">取消</view>
				<view class="action text-green" @tap="handleSubmit">确定</view>
			</view>
			<!--商品第一张图片显示 -->
			<view>
					<image  class="my-image-size"  :src="imageSrc+product.skus[curIx].images[0].largeImage" mode="aspectFit"></image>
			</view>
			
			
			<!--商品详情区域  例如：名称和价格 -->
			<view>
				
				<view class="solids-bottom padding-xs flex align-center bg-white">
				
					<view class="flex-sub  bg-white">
						<view class="solid-bottom text-xxl padding ">
							<text class="text-price text-red">
							{{product.skus[curIx].price}}
							</text>
						</view>
						<view class="padding">{{product.skus[curIx].name}}</view>
					</view>
				</view>
				
				
				
			</view>
			<!-- 规格选择区域-->
			
			<view class="grid col-3 padding-sm">
				<view v-for="(item,index) in product.skus" class="padding-xs" :key="index">
					<button class="cu-btn round "    v-bind:class="curIx==index?'bg-orange':'line-orange'"   @click="selected" :data-index="index"    >规格{{index}}</button>
					
				</view>
			</view>
		</view>
	</view>
	
		
		
		
		
		
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				product: {},
				imageSrc: this.$global.imageSrc,
				labels: [
					'图文详情',
					'商品介绍',
					'规格包装',
					'商品评价'

				],
				curIx:0, //当前默认规格索引
				modalName:null

			}
		},
		onLoad: function(params) {
			//params.id 就可以获取url 传递过来的值
			var id = params.id;
			if(id){
				//查询商品详情   发起网络请求
				this.$api.__api__spudetails(id).then((res) => {
					//成功之后  
					this.product = res.data;
					console.log(this.product)
				
				})
				
				
			}else{
				uni.showToast({
					title:'没有商品数据',
					duration:3000
				})
			}
			
			
			

		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			//选中规格
			selected:function(e){
				this.curIx = e.currentTarget.dataset.index;   //更换索引
			},
			//加入购物车
			handleSubmit:function(){
				//?如何获得购物车ID
				//在此查询购物车
				this.$api.__api__cart_list( this.$global.userinfo.id).then((res) => {
					let cartId = res.data.id;
					this.$api.__api__cart_update({
						cartId:cartId,
						count:1,
						skuId:this.product.skus[this.curIx].id   // ? id code ?
					}).then((res) =>{
						uni.showToast({
							title:'已经加入购物车',
							duration:3000
						})
					})
				
				})
				
				
				
				
				/* this.$api.__api__cart_update().then((res)=>{
						//
				}); */
			}
			
			
		}
	}
</script>

<style>
	.my-sw-h {
		height: 400upx;

	}
	.my-foot-h{
		height: 100upx;
	}
	.my-image-size{
		height: 150upx;
		width: 150upx;
		
	}
	
</style>
